<template>
  <div class="app-container" ref="appcontainer">
    <!-- <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px">
      <el-form-item label="手机号" prop="orderId">
        <el-input
          v-model="queryParams.orderId"
          placeholder="手机号"
          clearable
          size="small"
        />
      </el-form-item>
      <el-form-item label="姓名" prop="orderId">
        <el-input
          v-model="queryParams.orderId"
          placeholder="姓名"
          clearable
          size="small"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row> -->
    <el-table v-loading="loading" :height="tableHeight" :data="orderList">
      <el-table-column label="id" align="center" prop="id" />
      <el-table-column label="姓名" align="center" prop="storeName" />
      <el-table-column label="手机" align="center" prop="storePhone" />
      <el-table-column label="银行卡" align="center" prop="storeBankCard" />
      <el-table-column label="提现金额" align="center" prop="money" />
      <el-table-column label="类型" align="center" prop="type">
        <template slot-scope="scope">
          {{
            scope.row.type == "store"
              ? "门店提现"
              : scope.row.type == "staff"
              ? "分销提现"
              : ""
          }}
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" prop="status">
        <template slot-scope="scope">
          {{
            scope.row.status == "apply"
              ? "申请"
              : scope.row.status == "success"
              ? "同意"
              : ""
          }}
        </template>
      </el-table-column>

      <!-- <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="apply(scope.row)" v-if="scope.row.status != 'success'"
            >打款</el-button
          >
        </template>
      </el-table-column> -->
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>
  
  <script>
import { cashList, applycash } from "@/api/store/store";
export default {
  name: "Cash",
  data() {
    return {
      tableHeight: 0,
      // 遮罩层
      loading: true,
      orderList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      showSearch: false,
    };
  },
  created() {
    this.getList();
    this.calHeight();
  },
  watch: {
    showSearch: "calHeight",
  },
  methods: {
    calHeight() {
      this.$nextTick(() => {
        const rect = this.$refs.appcontainer.getBoundingClientRect();
        // let height = this.$refs.queryForm.$el.offsetHeight;
        this.tableHeight = rect.height - 120;
      });
    },
    getList() {
      this.loading = true;
      cashList(this.queryParams).then((res) => {
        this.total = res.total;
        this.orderList = res.rows;
        console.log(this.orderList);
        this.loading = false;
      });
    },
    apply(row) {
      this.$confirm('是否确认打款?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
        .then(() => {
          const id = row.id;
          applycash(id).then((res) => {
            if (res.code == 200) {
                this.$message({
                    message: res.msg,
                    type: 'success'
                });
              this.getList();
            }
          });
        })
        .catch(() => {});
    },
  },
};
</script>
  